<template>
  <div class="all">
    <div class="top">
      <header>
        <div class="div" @click="back">
          <img src="../../../assets/返回.png" alt="" />
          <span class="solid">返回</span>
        </div>
        <div class="div">
          <ul class="tabUl">
            <li
              :class="tabIndex == 0 ? 'selectTab' : ''"
              @click="clickTabBar(0)"
            >
              图
            </li>
            <li
              :class="tabIndex == 1 ? 'selectTab' : ''"
              @click="clickTabBar(1)"
            >
              表
            </li>
          </ul>
        </div>
        <div class="div">
          <img @click="add()" src="../../../assets/蓝添加.png" alt="" />
          <span @click="add()" class="solid">新增记录</span>
        </div>
      </header>
      <div class="title">
        <ul class="tabUl_date">
          <li
            :class="dateTabIndex == 0 ? 'selectTab_date' : ''"
            @click="clickTableUl(0)"
          >
            日期段
          </li>
          <li
            :class="dateTabIndex == 1 ? 'selectTab_date' : ''"
            @click="clickTableUl(1)"
          >
            日期
          </li>
        </ul>
        <span
          style="display: flex; align-items: center"
          @click="dateTabIndex == 0 ? (timeShow = true) : (dateShow = true)">
          <a v-show="dateTabIndex == 0">
            {{ sTime }}
            ~
            {{ eTime }}
          </a>
          <a v-show="dateTabIndex == 1">{{
            Common.formatDate(currentDate, 'yyyy-mm-dd')
          }}</a>
          <img
            style="width: 13px; height: 7px; margin-left: 5px"
            src="../../../assets/sortBottom.png"
            alt=""
          />
        </span>
      </div>
    </div>
    <div
      class="tableTitle"
      :class="tabIndex == 0 ? 'color_green' : 'color_blue'">
      <span></span>
      <span>{{ tabIndex == 0 ? '血压（mmHg）' : '血压/心率统计表' }}</span>
      <span
        @click="cankaoShow = true"
        style="display: flex; align-items: center"
      >
        <img
          v-show="tabIndex == 0"
          style="width: 15px; height: 15px; margin-right: 5px"
          src="../../../assets/帮助绿.png"
          alt=""
        />
        <img
          v-show="tabIndex == 1"
          style="width: 15px; height: 15px; margin-right: 5px"
          src="../../../assets/帮助小@2x.png"
          alt=""
        />
        参考值
      </span>
    </div>
    <div v-show="tabIndex == 0">
      <div class="main" ref="main" style="width: 100%; height: 300px"></div>
      <div style="margin-top: 10px" class="tableTitle color_green">
        <span></span>
        <span>心率</span>
        <span
          @click="XinLvShow = true"
          style="display: flex; align-items: center"
        >
          <img
            v-show="tabIndex == 0"
            style="width: 15px; height: 15px; margin-right: 5px"
            src="../../../assets/帮助绿.png"
            alt=""
          />
          <img
            v-show="tabIndex == 1"
            style="width: 15px; height: 15px; margin-right: 5px"
            src="../../../assets/帮助小@2x.png"
            alt=""
          />
          参考值
        </span>
      </div>
      <div class="main" ref="main1" style="width: 100%; height: 300px"></div>
    </div>
    <!-- tabIndex 0是图,1是表 -->
    <div v-show="tabIndex == 1">
      <table border="1">
        <thead>
          <tr>
            <th>日期</th>
            <th>
              <p>收缩压</p>
              <p>（mmHg）</p>
            </th>
            <th>
              <p>舒张压</p>
              <p>（mmHg）</p>
            </th>
            <th>
              <p>心率</p>
              <p>（次/分钟）</p>
            </th>
          </tr>
          <tr
            @click="add(item)"
            v-for="(item, index) in xinlv_xueyaList"
            :key="index"
          >
            <td>{{ item.date }}</td>
            <td
              :class="
                item.systolic_pressure > 140 || item.systolic_pressure <= 90
                  ? 'red'
                  : ''
              "
            >
              {{ item.systolic_pressure }}
            </td>
            <td
              :class="
                item.diastolic_pressure >= 90 || item.diastolic_pressure <= 60
                  ? 'red'
                  : ''
              "
            >
              {{ item.diastolic_pressure }}
            </td>
            <td :class="item.xinlv > 100 || item.xinlv < 60 ? 'red' : ''">
              {{ item.xinlv }}
            </td>
          </tr>
        </thead>
      </table>
      <van-empty
        style="width: 100%; height: 60%"
        v-show="tabIndex == 1 && xinlv_xueyaList.length <= 0"
        class="custom-image"
        :image="require('../../../assets/空两本书.png')"
        description="暂无血压心率记录"
      />
    </div>
    <van-calendar
      color="#1da4f2"
      :style="{ bottom: '50px' }"
      v-model="timeShow"
      type="range"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="timeOnConfirm"
    />
    <van-popup
      round
      position="bottom"
      :style="{ bottom: '50px' }"
      v-model="dateShow"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="dateConfirm"
        :formatter="formatter"
      />
    </van-popup>
    <!-- 血压参考值 -->
    <van-dialog
      v-model="cankaoShow"
      width="80%"
      :style="{ maxHeight: '70%', overflow: 'auto' }"
      confirm-button-color="#1da4f2"
      confirmButtonText="知道了"
      :lock-scroll="false"
    >
      <template #default>
        <div class="popDiv">
          <div
            style="
              display: flex;
              justify-content: center;
              height: 44px;
              align-items: center;
            "
          >
            血压参考值
          </div>
          <img
            style="width: 90%; height: 300px"
            src="../../../assets/血压参考值.png"
            alt=""
          />
          <div
            v-show="tabIndex == 1"
            style="
              display: flex;
              justify-content: center;
              height: 44px;
              align-items: center;
              margin-top: 10px;
            "
          >
            心率参考值
          </div>
          <div v-show="tabIndex == 1" style="width: 95%; margin: 0 auto">
            <p>
              心脏的跳动有收缩期和舒张期，以保证足够的血液供应全身。心跳过快，易发高血压，寿命相对较短；心跳过慢，有引起心脏停搏的危险。
            </p>
            <br />
            <p>
              人体的正常静息心率为60-100次/分钟，而静息心率在60~70次/分钟的人，生存率更高；
            </p>
            <br />
            <p>
              若静息心率＜60次/分钟，则为心动过缓，老年人出现50次/分钟也正常；若＞100次/分钟，则为心动过速。
            </p>
            <br />
            <p>
              另外，有心绞痛、心衰人群，静息心率的推荐范围为50-70次/分钟；高血压患者的静息心率则应＜80次/分钟。
            </p>
            <br />
            <p>
              Tips:静息心率是指在清醒、不活动的安静状态下，每分钟心跳的次数。
            </p>
          </div>
        </div>
      </template>
    </van-dialog>
    <van-dialog
      v-model="XinLvShow"
      width="80%"
      :style="{ maxHeight: '70%', overflow: 'auto' }"
      confirm-button-color="#1da4f2"
      confirmButtonText="知道了"
      :lock-scroll="false"
    >
      <template #default>
        <div class="popDiv">
          <div
            style="
              display: flex;
              justify-content: center;
              height: 44px;
              align-items: center;
            "
          >
            心率参考值
          </div>
          <div style="width: 95%; margin: 0 auto">
            <p>
              心脏的跳动有收缩期和舒张期，以保证足够的血液供应全身。心跳过快，易发高血压，寿命相对较短；心跳过慢，有引起心脏停搏的危险。
            </p>
            <br />
            <p>
              人体的正常静息心率为60-100次/分钟，而静息心率在60~70次/分钟的人，生存率更高；
            </p>
            <br />
            <p>
              若静息心率＜60次/分钟，则为心动过缓，老年人出现50次/分钟也正常；若＞100次/分钟，则为心动过速。
            </p>
            <br />
            <p>
              另外，有心绞痛、心衰人群，静息心率的推荐范围为50-70次/分钟；高血压患者的静息心率则应＜80次/分钟。
            </p>
            <br />
            <p>
              Tips:静息心率是指在清醒、不活动的安静状态下，每分钟心跳的次数。
            </p>
          </div>
        </div>
      </template>
    </van-dialog>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'XueYaEChart',
  data() {
    return {
      userid: this.$route.query.userid,
      tabIndex: 0, // 图 /表
      dateTabIndex: 0, // 日期段 / 日期
      sTime: '',
      eTime: '',
      timeShow: false,
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(),
      dateShow: false,
      currentDate: new Date(),
      time: '',
      xinlv_xueyaList: [],
      cankaoShow: false,
      XinLvShow: false,
    }
  },
  computed: {
    zhexianDate() {
      let arr = []
      this.xinlv_xueyaList.map((curr, index) => {
        if (this.dateTabIndex == 0) {
          arr.push(this.Common.formatDate(curr.date, 'mm/dd'))
        } else {
          arr.push(curr.date)
        }
      })
      return arr
    },
    // 收缩压
    systolic_pressureList() {
      let arr = []
      this.xinlv_xueyaList.map((curr, index) => {
        arr.push(curr.systolic_pressure)
      })
      return arr
    },
    // 舒张压
    diastolic_pressureList() {
      let arr = []
      this.xinlv_xueyaList.map((curr, index) => {
        arr.push(curr.diastolic_pressure)
      })
      return arr
    },
    xinlvList() {
      let arr = []
      this.xinlv_xueyaList.map((curr, index) => {
        arr.push(curr.xinlv)
      })
      return arr
    },
    getData() {
      // if (this.tabIndex == 1) {
      if (this.dateTabIndex == 0) {
        this.getTimeData()
      } else if (this.dateTabIndex == 1) {
        this.getDateData()
      }
      // }
      return 1
    },
  },
  mounted() {
    this.time = this.Common.formatDate(this.currentDate, 'yyyy-mm-dd')
    this.sTime = this.Common.formatDate(
      new Date().setDate(new Date().getDate() - 7),
      'yyyy-mm-dd'
    )
    this.eTime = this.Common.formatDate(new Date(), 'yyyy-mm-dd')
    this.clickTabBar(0)
    this.$nextTick(function () {
      this.drawLine('main')
    })
    this.drawCharts()
  },
  updated: function () {
    this.drawCharts()
  },
  methods: {
    getBiao() {
      this.$http
        .findXueYaXinLvList({
          sTime: this.sTime,
          eTime: this.eTime,
          userid: this.userid,
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            this.xinlv_xueyaList = []
            res.data.data.map((curr, index) => {
              let obj = {
                date: curr.storagetime,
                xinlv: curr.LvContent,
                systolic_pressure: curr.content.split('/')[1],
                diastolic_pressure: curr.content.split('/')[0],
                xid: curr.id, // 血压id
                lid: curr.Lid,
              }
              this.xinlv_xueyaList.push(obj)
            })
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 新增记录跳转
    add(item) {
      if (item) {
        this.$router.push({
          path: '/AddXueYa',
          query: { userid: this.userid, lid: item.lid, xid: item.xid },
        })
      } else {
        this.$router.push({ path: '/AddXueYa', query: { userid: this.userid } })
      }
    },
    drawLine() {
      var arr = []
      for (var i = 0; i < this.diastolic_pressureList.length; i++) {
        arr[i] = (
          this.systolic_pressureList[i] - this.diastolic_pressureList[i]
        ).toString()
      }

      const chart = this.$refs.main
      let charts = echarts.init(chart)
      var option = {
        title: {
          text: '',
          subtext: '',
          textStyle: {
            fontSize: 13,
          },
        },
        tooltip: {
          trigger: 'axis',
        },

        // {
        //   orient: 'vertical',
        //   x: 'right', // 可设定图例在左、右、居中
        //   y: 'top', // 可设定图例在上、下、居中
        //   padding: [0, 50, 0, 0], // 可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
        //   data: ['异常', '正常'],
        //   icon: 'rect',
        // },
        legend: [
          {
            show: true,
            // icon: 'rect',
            itemWidth: 20,
            itemHeight: 10,
            itemGap: 5,
            top: '10',
            //x:'center',
            selectedMode: false,
            data: [
              { name: '正常', icon: 'circle' },
              { name: '异常', icon: 'circle' },
            ], // 分别修改legend格式
            right: '5%',
            textStyle: {
              fontSize: 12,
              color: '#333',
            },
          },
        ],
        grid: {
          left: '6%',
          right: '4%',
          bottom: '5%',
          containLabel: true,
          y2: 200,
        },
        xAxis: {
          boundaryGap: false,
          type: 'category',
          data: this.zhexianDate,
          axisLine: {
            // x轴坐标轴，false为隐藏，true为显示
            show: false,
          },
          // splitLine: {
          //   show: true,
          //   lineStyle: {// y轴网格线设置
          //     color: '#1da4f2',
          //     width: 1,
          //     type: 'solid'
          //   }
          // },
          axisLabel: {
            interval: 0,
            formatter: function (val) {
              if (val) return val + '\n' + '2021'
            },
          },
          max: 8,
        },
        // visualMap: [{
        //   top: 10,
        //   right: 10,
        //   show: true,
        //   dimension: 1,
        //   seriesIndex: 0,
        //   textStyle: { // 图例文字的样式
        //     color: '#333',
        //     fontSize: 16
        //   },
        //   pieces: [{
        //     label: '异常'
        //   }, {
        //     label: '正常'
        //   }]
        // }],
        yAxis: {
          type: 'value',
          name: 'mmHg',
          nameTextStyle: 'end',
          min: 40,
          // max: 200,
          show: true,
          position: 'left',
          axisLine: {
            // y轴坐标轴，false为隐藏，true为显示
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // y轴网格线设置
              color: '#ccc',
              width: 1,
              type: 'dotted',
            },
          },
        },
        series: [
          {
            name: '收缩压',
            type: 'line',
            data: this.systolic_pressureList,
            symbol: 'circle', // 拐点样式
            symbolSize: 4, // 拐点大小
            lineStyle: {
              color: '#faa12f', // 设置折线的颜色
              borderColor: '#faa12f',
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
                color: function (params) {
                  if (params.value > 140) {
                    return '#E3170D' //红色
                  } else if (params.value <= 90) {
                    return '#E3170D' //红色
                  } else {
                    return '#1da4f2' //蓝色
                  }
                },
              },
            },
          },
          {
            name: '舒张压',
            type: 'line',
            data: this.diastolic_pressureList,
            symbol: 'circle', // 拐点样式
            symbolSize: 4, // 拐点大小
            lineStyle: {
              color: '#faa12f', // 设置折线的颜色
              borderColor: '#faa12f',
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
                color: function (params) {
                  if (params.value >= 90) {
                    return '#E3170D'
                  } else if (params.value <= 60) {
                    return '#E3170D'
                  } else {
                    return '#1da4f2'
                  }
                },
              },
            },
          },
          {
            name: '正常',
            type: 'line',
            itemStyle: {
              //设置点的颜色
              normal: {
                label: {
                  show: true,
                },
                color: '#1DA4F2', //蓝色
              },
            },
          },
          {
            name: '异常',
            type: 'line',
            itemStyle: {
              //设置点的颜色
              normal: {
                label: {
                  show: true,
                },
                color: '#E3170D', //蓝色
              },
            },
          },
          {
            type: 'bar',
            stack: '总量',
            itemStyle: {
              barBorderColor: 'rgba(0,0,0,0)',
              color: 'rgba(0,0,0,0)',
            },
            emphasis: {
              itemStyle: {
                barBorderColor: 'rgba(0,0,0,0)',
                color: 'rgba(0,0,0,0)',
              },
            },
            data: this.diastolic_pressureList,
          },
          {
            type: 'bar',
            stack: '总量',
            barWidth: 1,
            itemStyle: {
              normal: {
                color: '#1DA4F2',
              },
            },
            data: arr,
          },
        ],
        dataZoom: [
          {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            left: '9%',
            bottom: -5,
            start: 0,
            end: 90, // 初始化滚动条
          },
        ],
      }
      charts.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        charts.resize()
      })
    },
    drawLine1() {
      const chart = this.$refs.main1
      let charts = echarts.init(chart)
      var option = {
        title: {
          text: '',
          subtext: '',
          textStyle: {
            fontSize: 13,
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: [
          {
            show: true,
            // icon: 'rect',
            itemWidth: 20,
            itemHeight: 10,
            itemGap: 5,
            top: '10',
            //x:'center',
            selectedMode: false,
            data: [
              { name: '正常', icon: 'circle' },
              { name: '异常', icon: 'circle' },
            ], // 分别修改legend格式
            right: '5%',
            textStyle: {
              fontSize: 12,
              color: '#333',
            },
          },
        ],
        grid: {
          left: '6%',
          right: '4%',
          bottom: '5%',
          containLabel: true,
          y2: 200,
        },
        xAxis: {
          boundaryGap: false,
          type: 'category',
          data: this.zhexianDate,
          axisLine: {
            // x轴坐标轴，false为隐藏，true为显示
            show: true,
          },
          axisLabel: {
            interval: 0,
            formatter: function (val) {
              if (val) return val + '\n' + '2021'
            },
          },
          max: 8,
        },
        yAxis: {
          type: 'value',
          name: '次/分钟',
          nameTextStyle: 'end',
          min: 40,
          // max: 200,
          show: true,
          position: 'left',
          axisLine: {
            // y轴坐标轴，false为隐藏，true为显示
            show: true,
          },
          splitLine: {
            show: true,
            lineStyle: {
              // y轴网格线设置
              color: '#ccc',
              width: 1,
              type: 'dotted',
            },
          },
        },
        series: [
          {
            name: '心率',
            type: 'line',
            data: this.xinlvList,
            symbol: 'circle', // 拐点样式
            symbolSize: 4, // 拐点大小
            lineStyle: {
              color: '#faa12f', // 设置折线的颜色
              borderColor: '#faa12f',
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
                color: function (params) {
                  if (params.value > 100) {
                    return '#E3170D'
                  } else if (params.value < 60) {
                    return '#E3170D'
                  } else {
                    return '#1da4f2'
                  }
                },
              },
            },
          },
          {
            name: '正常',
            type: 'line',
            itemStyle: {
              //设置点的颜色
              normal: {
                label: {
                  show: true,
                },
                color: '#1DA4F2', //蓝色
              },
            },
          },
          {
            name: '异常',
            type: 'line',
            itemStyle: {
              //设置点的颜色
              normal: {
                label: {
                  show: true,
                },
                color: '#E3170D', //蓝色
              },
            },
          },
        ],
        dataZoom: [
          {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            left: '9%',
            bottom: -5,
            start: 0,
            end: 90, // 初始化滚动条
          },
        ],
      }
      // var option = {
      //   title: {
      //     text: '',
      //     subtext: '',
      //     textStyle: {
      //       fontSize: 13
      //     }
      //   },
      //   tooltip: {
      //     trigger: 'axis'
      //   },
      //   legend: {
      //     // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
      //     orient: 'horizontal',
      //     // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
      //     x: 'left',
      //     // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
      //     y: 'top',
      //     data: ['预期', '实际', '假设']
      //   },
      //
      //   grid: {
      //     left: '3%',
      //     right: '4%',
      //     bottom: '3%',
      //     containLabel: true,
      //     y2: 200
      //   },
      //   color: ['#F39800', '#F39800'],
      //   xAxis: {
      //     type: 'category',
      //     boundaryGap: false,
      //     data: this.zhexianDate,
      //     axisLine: { // x轴坐标轴，false为隐藏，true为显示
      //       'show': false
      //     },
      //     axisLabel: {
      //       interval: 0,
      //       rotate: 40
      //     },
      //     max: 8
      //   },
      //   yAxis: {
      //     type: 'value',
      //     name: '次/分钟',
      //     min: 50,
      //     show: true,
      //     position: 'left',
      //     axisLine: { // y轴坐标轴，false为隐藏，true为显示
      //       'show': false
      //     },
      //     splitLine: {
      //       show: true,
      //       lineStyle: {// y轴网格线设置
      //         color: '#ccc',
      //         width: 1,
      //         type: 'dotted'
      //       }
      //     }
      //   },
      //   series: [
      //     {
      //       name: '心率',
      //       type: 'line',
      //       data: this.xinlvList,
      //       symbol: 'circle', // 拐点样式
      //       symbolSize: 4, // 拐点大小
      //       lineStyle: {
      //         color: '#faa12f', // 设置折线的颜色
      //         borderColor: '#faa12f'
      //       },
      //       itemStyle: {
      //         normal: {
      //           label: {
      //             show: true
      //           },
      //           color: function (params) {
      //             if (params.value > 100) {
      //               return '#E3170D'
      //             } else if (params.value < 60) {
      //               return '#E3170D'
      //             } else {
      //               return '#1da4f2'
      //             }
      //           }
      //         }
      //       }
      //     }
      //   ],
      //   dataZoom: [{
      //     type: 'slider',
      //     show: true,
      //     xAxisIndex: [0],
      //     left: '9%',
      //     bottom: -5,
      //     start: 0,
      //     end: 90 // 初始化滚动条
      //   }]
      // }
      charts.setOption(option)
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        charts.resize()
      })
    },
    drawCharts() {
      this.drawLine()
      this.drawLine1()
    },
    // 点击图  表切换
    clickTabBar(num) {
      this.tabIndex = num
      this.clickTableUl()
    },
    // 选择日期添加年月日
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      } else if (type === 'day') {
        return val + '日'
      } else if (type === 'hour') {
        return val + '点'
      } else if (type === 'minute') {
        return val + '分'
      }
      return val
    },
    clickTableUl(num) {
      if (num !== undefined) {
        this.dateTabIndex = num
      }
      if (this.tabIndex == 0) {
        if (this.dateTabIndex == 0) {
          this.getTimeData()
        } else if (this.dateTabIndex == 1) {
          this.getDateData()
        }
      } else if (this.tabIndex == 1) {
        if (this.dateTabIndex == 0) {
          this.getBiao()
        } else if (this.dateTabIndex == 1) {
          this.getDateData()
        }
      }
    },
    getDateData() {
      this.drawCharts()
      this.$http
        .healthdataByTime({ userid: this.userid, time: this.time })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            let data = res.data.data
            this.xinlv_xueyaList = []
            data.xueya.map((item, i) => {
              data.xinlv.map((curr, index) => {
                let key = null
                let value = null
                if (Object.keys(item)[0] == 'id') {
                  key = Object.keys(item)[1]
                  value = Object.values(item)[1]
                } else {
                  key = Object.keys(item)[0]
                  value = Object.values(item)[0]
                }
                let xlValue = null
                let xlKey = null
                if (Object.keys(curr)[0] == 'id') {
                  xlValue = Object.values(curr)[1]
                  xlKey = Object.keys(curr)[1]
                } else {
                  xlValue = Object.values(curr)[0]
                  xlKey = Object.keys(curr)[0]
                }
                if (key == xlKey) {
                  let obj = {
                    date: key,
                    xinlv: xlValue,
                    systolic_pressure: value.toString().split('/')[1],
                    diastolic_pressure: value.toString().split('/')[0],
                    xid: item.id, // 血压id
                    lid: curr.id,
                  }
                  this.xinlv_xueyaList.push(obj)
                }
              })
            })
            // data.xueya.map((item, i) => {
            //   data.xinlv.map((curr, index) => {
            //     if (Object.keys(curr)[0] == Object.keys(item)[0]) {
            //       let obj = {
            //         date: Object.keys(curr)[0],
            //         xinlv: Object.values(curr)[0],
            //         systolic_pressure: Object.values(item)[0].split('/')[1],
            //         diastolic_pressure: Object.values(item)[0].split('/')[0],
            //         xid: item.id, // 血压id
            //         lid: curr.id
            //       }
            //       this.xinlv_xueyaList.push(obj)
            //     }
            //   })
            // })
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    getTimeData() {
      this.drawCharts()
      this.$http
        .healthdataByTimeDuan({
          userid: this.userid,
          sTime: this.sTime,
          eTime: this.eTime,
        })
        .then((res) => {
          console.log(res)
          if (res.data.status === 'success') {
            let data = res.data.data
            this.xinlv_xueyaList = []
            data.xueya.map((item, i) => {
              data.xinlv.map((curr, index) => {
                let key = null
                let value = null
                if (Object.keys(item)[0] == 'id') {
                  key = Object.keys(item)[1]
                  value = Object.values(item)[1]
                } else {
                  key = Object.keys(item)[0]
                  value = Object.values(item)[0]
                }
                let xlValue = null
                let xlKey = null
                if (Object.keys(curr)[0] == 'id') {
                  xlValue = Object.values(curr)[1]
                  xlKey = Object.keys(curr)[1]
                } else {
                  xlValue = Object.values(curr)[0]
                  xlKey = Object.keys(curr)[0]
                }
                if (key == xlKey) {
                  let obj = {
                    date: key,
                    xinlv: xlValue,
                    systolic_pressure: value.toString().split('/')[1],
                    diastolic_pressure: value.toString().split('/')[0],
                    xid: item.id, // 血压id
                    lid: curr.id,
                  }
                  this.xinlv_xueyaList.push(obj)
                }
              })
            })
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch((err) => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    dateConfirm() {
      this.time = this.Common.formatDate(this.currentDate, 'yyyy-mm-dd')
      this.getDateData()
      this.dateShow = false
    },
    timeOnConfirm(date) {
      const [start, end] = date
      this.timeShow = false
      this.sTime = this.Common.formatDate(start, 'yyyy-mm-dd')
      this.eTime = this.Common.formatDate(end, 'yyyy-mm-dd')
      this.getTimeData()
    },
    // 返回
    back() {
      this.$router.history.go(-1)
    },
  },
}
</script>

<style scoped>
.all {
  width: 100%;
  height: 100%;
  background: #faf9fe;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
.top {
  position: sticky;
  top: 0;
  z-index: 9;
}
header {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  background: white;
}
.div {
  height: 100%;
  display: flex;
  align-items: center;
  font-family: 'PingFang SC';
  font-size: 15px;
  font-weight: bold;
}
.div img {
  margin-right: 5px;
}
.div:nth-child(1) img {
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img {
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span {
  margin-right: 15px;
}
.div:nth-child(2) {
  flex: 1;
  justify-content: center;
}
.div:nth-child(1),
.div:nth-child(3) {
  flex: 1;
}
.div:nth-child(3) {
  justify-content: flex-end;
}
.solid {
  color: #1da4f2;
}
.tabUl {
  width: 120px;
  color: #1da4f2;
}
.tabUl_date {
  width: 110px;
  color: #43c8db;
}
.tabUl_date,
.tabUl {
  display: flex;
  align-items: center;
}
.tabUl_date li {
  border: 1px solid #43c8db;
}
.tabUl li {
  border: 1px solid #1da4f2;
}
.tabUl_date li,
.tabUl li {
  /*width: 60px;*/
  flex: 1;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -1px;
}

.tabUl_date li:first-child,
.tabUl li:first-child {
  border-radius: 5px 0 0 5px;
}
.tabUl_date li:last-child,
.tabUl li:last-child {
  border-radius: 0 5px 5px 0;
}
.selectTab {
  background: #1da4f2 !important;
  color: #ffffff !important;
}
.selectTab_date {
  background: #43c8db !important;
  color: #ffffff !important;
}
.tableTitle,
.title {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.title {
  padding: 0 15px;
  height: 44px;
  background: #ffffff;
  justify-content: space-between;
}
.tableTitle {
  height: 50px;
  background: rgba(29, 164, 242, 0.1);
  justify-content: space-between;
  color: #1da4f2;
}
.color_blue {
  color: #1da4f2 !important;
}
.color_green {
  color: #43c8db !important;
}
.tableTitle span {
  flex: 1;
}
.tableTitle span:nth-child(2) {
  display: flex;
  justify-content: center;
  font-size: 15px;
  font-weight: bold;
}
.tableTitle span:nth-child(3) {
  display: flex;
  justify-content: flex-end;
  padding-right: 5px;
  box-sizing: border-box;
  font-size: 13px;
}
table {
  width: 100%;
  border-color: #fff;
  border-collapse: collapse;
  margin: 0 auto;
}
table tr {
  display: flex;
  align-items: center;
}
table th {
  height: 50px;
  background: #1da4f2;
  color: #ffffff;
}
table th,
td {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
td {
  height: 40px;
  background: #ffffff;
}
.red {
  color: #e3170d !important;
}
.main {
  background: #ffffff;
}
.popDiv {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 80%;
  overflow: auto;
}
/deep/ .van-dialog__footer {
  position: sticky;
  bottom: 0;
}
</style>
